<template>
	<view class="yb-tabs yb-flex" :id="customIdSync" :class="customClassSync" :style="customStyleSync" ref="ybTabs">
		<yb-appear :disabled="appear" custom-class="yb-flex-1" @appear="onAppear">
			<template v-if="isShow">
				<view v-if="!hidden" class="yb-tabs-content yb-flex yb-row yb-align-center"
				:style="{
					'border-bottom-width': '1px',
					'border-bottom-style': 'solid',
					'border-color': optionsSync.gapColor,
				}">
					<scroll-view
					scroll-with-animation
					:scroll-into-view="scrollId"
					:show-scrollbar="false"
					class="yb-tabs-scroll"
					ref="ybTabsScroll"
					:scroll-x="true"
					:render-whole="true"
					:style="{
						height: Util.pixelunit(optionsSync.height),
						opacity: detailShow ? 0 : 1
					}">
						<view class="tabs" ref="tabs" :style="{
							flex: column == 'auto' ? '' : 1
						}">
							<view class="tab yb-flex yb-align-center yb-justify-center"
							:style="{
								// #ifdef APP-NVUE
								flex: column == 'auto' ? '' : 1,
								//#endif
								// #ifndef APP-NVUE
								width: column == 'auto' ? '' : (100 / data.length) + '%',
								// #endif
								'height': Util.pixelunit(optionsSync.height),
								'padding-left': column == 'auto' ? Util.pixelunit(optionsSync.padding) : '',
								'padding-right': column == 'auto' ? Util.pixelunit(optionsSync.padding) : ''
							}" v-for="(item, index) in data" :key="index" :id="'yb-tab_' + dataId + index" @tap="changeTab(index)">
								<view class="tab-box yb-flex yb-flex-1 yb-justify-center" :style="{
									'border-bottom-color': currentSync == index ? optionsSync.sliderColor : 'rgba(0,0,0,0)'
								}">
									<text class="tab-text"
									:class="'tab-text_' + index"
									ref="tab"
									:style="{
										color: index == currentSync ? optionsSync.focusColor : optionsSync.color,
										fontSize: Util.pixelunit(optionsSync.size)
									}">{{item.label}}</text>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="detail yb-flex yb-justify-center" v-if="detailShow" @touchmove.stop.prevent :style="{
						right: Util.pixelunit(Util.unitpixel(optionsSync.padding) + 50),
						left: Util.pixelunit(optionsSync.padding),
						height: Util.pixelunit(optionsSync.height)
					}">
						<text class="text" :style="{
							'font-size': Util.pixelunit(optionsSync.size),
							color: optionsSync.color
						}">切换</text>
					</view>
					<slot name="right">
						<view class="yb-flex yb-align-center yb-justify-center" v-if="column == 'auto' && arrowShow" @tap="detailShow = !detailShow" :style="{
							width: Util.pixelunit(Util.unitpixel(optionsSync.padding) + 50),
							height: Util.pixelunit(optionsSync.height)
						}">
							<view class="arrow yb-flex" :style="{
								'border-color': optionsSync.color,
								'margin-left': '30rpx',
								'margin-right': Util.pixelunit(optionsSync.padding),
								'transform': `rotateZ(${detailShow ? '135deg' : '-45deg'}) translateY(${detailShow ? '5rpx' : '-5rpx'})`
							}"></view>
						</view>
					</slot>
				</view>
				<view class="yb-items yb-flex" v-if="detailShow">
					<yb-gap height="20rpx"></yb-gap>
					<yb-grid :data="data" :column="itemColumn">
						<yb-tap @tap="changeTab(index)" v-for="(item, index) in data" :key="index" :slot="index"
						:borderRadius="optionsSync.itemRadius"
						custom-class="yb-justify-center yb-align-center"
						:custom-style="{
							backgroundColor: currentSync == index ? optionsSync.focusColor : optionsSync.itemColor,
							'padding-left': '20rpx',
							'padding-right': '20rpx',
							'padding-top': '10rpx',
							'padding-bottom': '10rpx',
						}">
							<yb-text
							:value="item.label"
							:lines="1"
							:size="optionsSync.size"
							:color="optionsSync.color"/>
						</yb-tap>
					</yb-grid>
					<yb-gap height="20rpx"></yb-gap>
				</view>
				<view class="yb-tabs-wrapper yb-flex yb-flex-1" v-if="customSlot">
					<swiper :render-whole="true" class="yb-tabs-swiper" :current="currentSync" skip-hidden-item-layout :duration="300" @change="changeTab($event.detail.current)">
						<swiper-item class="yb-flex" v-for="(item, index) in data" :key="index">
							<slot :name="index"></slot>
						</swiper-item>
					</swiper>
				</view>
				<view v-if="!isShow || disabled" class="mask"></view>
			</template>
		</yb-appear>
	</view>
</template>

<script>
	import Util from '../../js_sdk/util.js'
	import ComponentMixin from '../../js_sdk/componentMixin.js'
	export default {
		mixins: [ComponentMixin],
		props: {
			dataId: {
				type: String,
				default () {
					let mydate = new Date();
					return 'cms' + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds() + Math.round(Math.random() * 10000);
				}
			},
			data: {
				type: Array,
				default () {
					return new Array
				}
			},
			disabled: {
				type: Boolean,
				default: false
			},
			//是否展示详情箭头
			arrowShow: {
				type: Boolean,
				default: true
			},
			current: {
				type: Number,
				default: 0
			},
			column: {
				type: [Number, String],
				default: 'auto'
			},
			customSlot: {
				type: Boolean,
				default: true
			},
			hidden: {
				type: Boolean,
				default: false
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		data () {
			return {
				isShow: false,
				currentSync: 0,
				scrollId: '',
				fullWidth: 0,
				blockPadding: uni.upx2px(40),
				detailShow: false,
				tabs_binding: null,
				appear: false
			}
		},
		computed: {
			Util () {
				return Util
			},
			itemColumn () {
				return Math.floor((this.fullWidth - uni.upx2px(60)) / uni.upx2px(150))
			},
			optionsSync () {
				return Object.assign({}, {
					//字体颜色
					color: '#333333',
					//字体大小
					size: 30,
					//高度
					height: 80,
					//间距
					padding: 32,
					//底部边框颜色
					gapColor: '#999',
					//滑块颜色
					sliderColor: '#2196F5',
					//聚焦颜色
					focusColor: '#2196F5',
					//详情展示颜色
					itemColor: '#999',
					//详情项border-radius
					itemRadius: '10rpx'
				}, this.options)
			}
		},
		methods: {
			onAppear () {
				if ( !this.appear ) {
					this.$nextTick(function() {
						setTimeout(() => {
							Util.getRect('.yb-tabs', this.$refs.ybTabs, this).then(res => {
								this.fullWidth = res.width
								this.currentSync = this.current
								this.isShow = true
								this.$nextTick(function () {
									this.$emit('ready')
								})
							})
						}, 100)
					})
				}
				this.appear = true
			},
			changeTab (index) {
				this.$nextTick(function () {
					if ( this.currentSync != index ) {
						this.currentSync = index
						this.$nextTick(function () {
							this.scrollId = 'yb-tab_' + this.dataId + (index - 1 >= 0 ? index - 1 : 0)
							this.$emit('update:current', index)
							this.$emit('change', {
								current: index
							})
						})
					}
				})
			}
		},
		watch: {
			current (newVal) {
				if ( newVal != this.currentSync ) {
					if ( this.data.length > 0 ) {
						if ( this.appear ) {
							this.currentSync = newVal
							this.scrollId = 'yb-tab_'+ this.dataId + (newVal - 1 >= 0 ? newVal - 1 : 0)
						}
					}
				}
			}
		}
	}
</script>

<style scoped>
	/* #ifdef H5 */
	/deep/ .uni-scroll-view {
		scrollbar-width: none;/* Firefox */
		-ms-overflow-style: none;/* IE 10+ */
	}
	/deep/ .uni-scroll-view::-webkit-scrollbar {
	  display: none; /* Chrome Safari */
	}
	/* #endif */
	.yb-tabs .yb-tabs-content {
		position: relative;
	}
	.yb-tabs-scroll {
		flex: 1;
		/* #ifndef APP-NVUE */
		flex-shrink: 0;
		overflow: hidden;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex-direction: row;
		align-items: center;
		/* #endif */
	}
	.yb-tabs .tabs {
		position: relative;
		/* #ifdef APP-NVUE */
		flex-direction: row;
		align-items: center;
		/* #endif */
		/* #ifndef APP-NVUE */
		display: block;
		white-space: nowrap;
		/* #endif */
	}
	/* #ifndef APP-NVUE */
	.yb-tabs .tab {
		display: inline-flex;
	}
	/* #endif */
	.yb-tabs .tab-box {
		border-top-width: 8rpx;
		border-bottom-width: 8rpx;
		border-top-color: rgba(0, 0, 0, 0);
		border-top-style: solid;
		border-bottom-style: solid;
	}
	.yb-tabs .tab .tab-text {
		text-align: center;
		/* #ifndef APP-NVUE */
		transition: color .3s;
		/* #endif */
	}
	.yb-tabs .detail {
		position: absolute;
		top: 0;
	}
	.yb-tabs .arrow {
		width: 20rpx;
		height: 20rpx;
		border-left-width: 2px;
		border-bottom-width: 2px;
		border-left-style: solid;
		border-bottom-style: solid;
	}
	.yb-items {
		padding: 0 30rpx;
	}
	.yb-items .mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.yb-tabs-wrapper {
		/* #ifndef APP-NVUE */
		position: relative;
		/* #endif */
	}
	.yb-tabs-swiper {
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
		/* #ifndef APP-NVUE */
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: auto!important;
		/* #endif */
	}
</style>
